<template>
  <div id="box">
      <div class="content">
          <ul>
              <li>
                  <van-icon name="friends" />{{user}}
              </li>
              <li>退出登录</li>
              <li @click="gotoOrder">我的订单</li>
              <li>会员中心</li>
              <li>帮助中心</li>
              <li>关于我们</li>
              <li>
                  手机版
              </li>
          </ul>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            user:"请登录"
        }
    },
    methods:{
        gotoOrder(){
            this.$router.push({
                path:"/OrderView"
            })
        },
    },
    mounted(){
        let user = localStorage.getItem("user");
        if(user){
            const res = JSON.parse(user);
            this.user = res.account
        }
    }
}
</script>

<style lang="less" scoped>
    #box{
        width: 100%;
        height: 53px;
        background:rgb(51,51,51);
        .content{
            width: 1240px;
            height: 100%;
            margin:0 auto;
            color:white;
            display: flex;
            font-size:12px;
            justify-content: flex-end;
            ul,li{
                list-style: none;
            }
            ul{
                display:flex;
                height: 100%;
                align-items: center;
                li{
                    padding:0 15px;
                }
                li:nth-child(1n){
                    border-right:1px solid white;
                }
                li:last-child{
                    border-right:1px solid transparent;
                }
            }
        }
    }
</style>